<template>
	<div
		v-if="isShowTree"
		v-loading="treeLoading"
		element-loading-spinner="el-icon-loading"
		:class="[treeBoxContainer ? treeBoxContainer : 'tree-box']"
	>
		<!-- 全量树 -->
		<el-tree
			ref="tree"
			:props="defaultProps"
			:highlight-current="hightLightNode"
			:node-key="treeNodeKey"
			:load="loadNode"
			:data="treeData"
			:default-expanded-keys="expandedKeys"
			:lazy="isLazy"
			:default-expand-all="isDefaultExpandAll"
			:empty-text="emptyText"
			:icon-class="treeNodeIcon"
			:draggable="isDraggableNode"
			:allow-drag="judgeNodeDrag"
			:allow-drop="judgeNodeDrop"
			@node-click="nodeClick"
		>
			<span slot-scope="{ node, data }" class="custom-tree-node">
				<slot :node="node" :data="data" name="proxyTempate"></slot>
			</span>
		</el-tree>
	</div>
</template>
<script>
export default {
	name: 'ProxyTree',
	props: {
		// 是否显示tree组件
		isShowTree: {
			type: Boolean,
			default: true
		},
		// 加载树loading
		treeLoading: {
			type: Boolean,
			default: false
		},
		// 默认展开的节点的 key 的数组
		expandedKeys: {
			type: Array,
			default: () => []
		},
		// 加载子树数据的方法
		loadNode: {
			type: Function,
			default: function() {}
		},
		// 每个树节点用来作为唯一标识的属性
		treeNodeKey: {
			type: String,
			default: ''
		},
		// 是否高亮当前节点
		hightLightNode: {
			type: Boolean,
			default: false
		},
		// 是否懒加载子节点，需与 load 方法结合使用
		isLazy: {
			type: Boolean,
			default: false
		},
		// 配置选项
		defaultProps: {
			type: Object,
			default() {
				return {}
			}
		},
		// 节点为空时展示的数据
		emptyText: {
			type: String,
			default: ''
		},
		// 是否默认展开所有子节点
		isDefaultExpandAll: {
			type: Boolean,
			default: false
		},
		// 自定义树节点图标
		treeNodeIcon: {
			type: String,
			default: ''
		},
		// 树外层宽度class
		treeBoxContainer: {
			type: String,
			default: ''
		},
		// 节点是否能被拖拽
		isDraggableNode: {
			type: Boolean,
			default: false
		},
		// 判断节点能否被拖拽
		judgeNodeDrag: {
			type: Function,
			default: function() {}
		},
		// 判断节点是否被放置
		judgeNodeDrop: {
			type: Function,
			default: function() {}
		},
		// 展示的数据
		treeData: {
			type: Array,
			default: () => []
		}
	},
	mounted() {},
	methods: {
		nodeClick(data, node) {
			if (node.level === 1) {
				const cnode = this.$refs.tree.getNode(data.id)
				cnode.loaded = false
				cnode.expand()
			}
			this.$emit('getNodeData', data)
		}
	}
}
</script>

<style lang="scss" scoped>
.tree-box {
	width: 320px;
	margin-right: 25px;
	height: 70vh;
	padding-top: 15px;
	overflow-y: auto;
	overflow-x: auto;
}
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .el-tree-node__expand-icon {
	color: #c15353;
}
::v-deep .el-tree-node {
	padding-bottom: 4px;
	padding-top: 4px;
}
::v-deep .custom-tree-node .el-icon-s-custom {
	display: inline-block;
	width: 18px;
	height: 18px;
}
::v-deep .el-icon-user-solid {
	color: #c15353;
}
.el-tree {
	::v-deep .el-icon-caret-right:before {
		// 未展开
		content: '\e6d9';
		font-size: 18px;
	}
	::v-deep .expanded:before {
		// 展开
		content: '\e6d8';
		font-size: 18px;
	}
	::v-deep .expanded {
		// 展开不旋转
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
</style>
